﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>JS Console - Example</title>
	<link href="styles/js-console.css" rel="stylesheet" />
	<style>
		#number {
			border: 1px solid black;
			padding: 5px 15px;
			background-color: black;
			color: white;
			font-family: Consolas;
			margin-bottom: 5px;
		}

		a {
			color: black;
			border: 1px solid black;
			padding: 5px 15px;
			text-decoration: none;
			display: inline-block;
			margin: 15px 0;
		}

			a:hover {
				text-decoration: underline;
			}
	</style>
</head>
<body>
	<label for="tb-first">First: </label>
	<input type="text" id="tb-first" />
	<br />
	<label for="tb-second">Second: </label>
	<input type="text" id="tb-second" />
	<br />
	<a href="#" onclick="onCheckNumbersButtonClick()">Even or Odd</a>
	<div id="console">
	</div>
	<script src="scripts/js-console.js">	  
	</script>
	<script>
		function onCheckNumbersButtonClick() {
			var first = jsConsole.readFloat("#tb-first");
			var second = jsConsole.readFloat("#tb-second");

			if (first == second) {
				jsConsole.writeLine(first + " = " + second);
			}
			else {
				if (first > second) {
					jsConsole.writeLine(first + " > " + second);
				}
				else {
					jsConsole.writeLine(first + " < " + second);
				}
			}
		}
	</script>
</body>
</html>
